<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" style="background-color: pink;"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <script>
        //1.write
        // window.onload = function () {
        //     //当html页面加载完成的时候调用
        //     document.write('<div>123</div>');
        // }
        //2.innerHTM使用拼接字符串的方式创建100个a标签
        var box1 = document.querySelector('.box1');
        var date1 = Date.now();
        console.log('startTime=======' + date1);
        var str = '';
        for (var i = 0; i < 1000; i++) {
            str += '<a href=javascript:;>a标签<a>';
        }
        box1.innerHTML = str;
        var date2 = Date.now();
        console.log('endTime========' + date2);
        console.log('innerHTML字符串拼接方式创建时间=====' + (date2-date1));
        //3.innerHTML使用数组的方式创建100个a标签
        var box2 = document.querySelector('.box2');
        var date3 = Date.now();
        var strArray = new Array();
        for (var i = 0; i < 1000; i++) {
            strArray.push('<a href=javascript:;>a标签<a>');
        }
        box2.innerHTML = strArray.join('');
        var date4 = Date.now();
        console.log('innerHTML数组方式创建时间=====' + (date4-date3));

        //4.createElement创建100个a标签
        var box3 = document.querySelector('.box3');
        var date5 = Date.now();
        for(var i =0; i<1000; i++) {
            var a = document.createElement('a');
            a.innerHTML = 'a标签';
            box3.appendChild(a);
        }
        var date6 = Date.now();
        console.log('createElement创建方式时间=====' + (date6-date5));
    </script>
</body>
</html>